<script setup>
import { listFlowData } from '@/api/data.js'
const data = ref({
  value1: {
    num: 0,
    status: '',
    value: 0,
  },
  value2: {
    num: 0,
    status: '',
    value: 0,
  },
  value3: {
    num: 0,
    status: '',
    value: 0,
  },
  value4: {
    num: 0,
    status: '',
    value: 0,
  },
  value5: {
    num: 0,
    status: '',
    value: 0,
  },
  value6: {
    num: 0,
    status: '',
    value: 0,
  },
  value7: {
    num: 0,
    status: '',
    value: 0,
  },
  value8: {
    num: 0,
    status: '',
    value: 0,
  },
})
onMounted(() => {
  function getData() {
    listFlowData(3).then((res) => {
      data.value = JSON.parse(res.rows[0].data)
    })
  }
  getData()
  setInterval(getData, import.meta.env.VITE_APP_INTERVAL)
})
</script>
<template>
  <div class="center-top">
    <DataItem
      title="市场数量(个)"
      :number="data.value1.num"
      :type="data.value1.status"
      :value="data.value1.value"
    />
    <DataItem
      title="交易量(万吨)"
      :number="data.value2.num"
      :type="data.value2.status"
      :value="data.value2.value"
    />
    <DataItem
      title="交易额(亿元)"
      :number="data.value3.num"
      :type="data.value3.status"
      :value="data.value3.value"
    />
    <DataItem
      title="市场平均单价(元/千克)"
      :number="data.value4.num"
      :type="data.value4.status"
      :value="data.value4.value"
    />
    <DataItem
      title="出口国家/地区(个)"
      :number="data.value5.num"
      :type="data.value5.status"
      :value="data.value5.value"
    />
    <DataItem
      title="出口总量(万吨)"
      :number="data.value6.num"
      :type="data.value6.status"
      :value="data.value6.value"
    />
    <DataItem
      title="出口总额(亿美元)"
      :number="data.value7.num"
      :type="data.value7.status"
      :value="data.value7.value"
    />
    <DataItem
      title="龙井茶价格指数"
      :number="data.value8.num"
      :type="data.value8.status"
      :value="data.value8.value"
    />
  </div>
</template>
<style lang="scss" scoped>
.center-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
</style>
